<template>
  <div class="home">
    <h1 class="page-title">最新文章</h1>
    <ArticleList />
  </div>
</template>

<script setup>
import ArticleList from '@/components/blog/ArticleList.vue'
import { useBlogStore } from '@/stores/blog'
import { onMounted } from 'vue'

const blogStore = useBlogStore()

onMounted(() => {
  blogStore.fetchArticles()
  blogStore.fetchCategories()
  blogStore.fetchTags()
})
</script>

<style scoped>
.home {
  padding: 1rem 0;
}

.page-title {
  margin: 0 0 1.5rem;
  color: #2c3e50;
  font-size: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
  white-space: nowrap; /* 防止文字换行 */
  text-align: center; /* 文字居中 */
  letter-spacing: 0.5rem; /* 增加字间距 */
}
</style>